<script setup lang="ts">
import {reactive, ref} from 'vue';
import {batchUpdateStoreLiaison} from "@/views/menus/customer-management/api.ts";
const dialogTableVisible = defineModel()

const ruleFormRef = ref()
const rules = reactive({
  oldStoreLiaison: [
    { required: true, message: '店铺原对接人，必填', trigger: 'blur' },
  ],
  storeLiaison: [
    { required: true, message: '店铺对接人，必填', trigger: 'blur' },
  ],
})

const ruleForm = ref({
  oldStoreLiaison: null,
  storeLiaison: null,
})

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      await batchUpdateStoreLiaison(ruleForm.value)
      dialogTableVisible.value = false
      resetForm(formEl)
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<template>
  <el-dialog v-model="dialogTableVisible" title="批量修改店铺对接人" width="500">
    <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
    >
      <el-form-item label="原对接人" prop="oldStoreLiaison">
        <el-input v-model="ruleForm.oldStoreLiaison" />
      </el-form-item>
      <el-form-item label="新对接人" prop="storeLiaison">
        <el-input v-model="ruleForm.storeLiaison" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>